<template>
  <div class="container">
    <div class="left">
      <div id="user-sex">用户性别统计</div>
      <div id="singer-sex">歌手性别统计</div>
    </div>

    <div class="main">
      <div id="song">歌曲统计</div>
    </div>

    <div class="right">
      <div id="user-status">系统用户状态统计</div>
      <div id="admin-status">管理员状态统计</div>
    </div>
  </div>
</template>
<!-- echarts的应用 -->
<script setup lang="ts">
// 按需引入echarts
import * as echarts from 'echarts'
import { adminStatusCountApi } from '@/api/admin'
import { consumerSexCountApi, consumerStatusCountApi } from '@/api/consumer'
import { singerSexCountApi } from '@/api/singer'
import { songCountApi } from '@/api/song'
import { onMounted } from 'vue'

onMounted(() => initEcharts())

// 初始化图表的信息
const initEcharts = async () => {
  let res1 = await consumerSexCountApi()
  initConsumerSexCount(res1.data)
  let res2 = await consumerStatusCountApi()
  initConsumerStatusCount(res2.data)
  let res3 = await singerSexCountApi()
  initSingerSexCount(res3.data)
  let res4 = await adminStatusCountApi()
  initAdminStatusCount(res4.data)
  let res5 = await songCountApi()
  initSongCount(res5.data)
}
const initConsumerSexCount = (data: any) => {
  let chartDom = document.getElementById('user-sex')
  let myChart = echarts.init(chartDom)
  let options
  options = {
    // 标题
    title: {
      text: '系统用户性别统计',
      left: 'center',
    },
    // 图例
    legend: {
      bottom: '10%',
    },
    // 提示框
    tooltip: {
      trigger: 'item',
    },
    // 工具栏
    toolbox: {
      show: true,
      // 工具配置项
      feature: {
        // 标注
        mark: {
          show: true,
        },
        // 数据视图
        dataView: {
          show: true,
          readOnly: false,
        },
        // 还原刷新
        restore: {
          show: true,
        },
        // 保存为图片
        saveAsImage: {
          show: true,
        },
      },
    },
    // 系列
    series: [
      {
        name: '',
        type: 'pie', //饼图
        radius: ['7%', '35%'], //饼图的半径
        center: ['50%', '45%'], //饼图位置
        roseType: 'area', //数据大小的展示形式
        // 图形样式
        itemStyle: {
          borderRadius: 8, //内外圆半径
        },
        // 数据内容
        data: data,
      },
    ],
  }
  options && myChart.setOption(options)
}
const initConsumerStatusCount = (data: any) => {
  let chartDom = document.getElementById('user-status')
  let myChart = echarts.init(chartDom)
  let options = {
    title: {
      text: '系统用户状态统计',
      left: 'center',
    },
    legend: {
      bottom: '10%',
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['7%', '35%'],
        center: ['50%', '45%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: data,
      },
    ],
  }
  options && myChart.setOption(options)
}
const initSingerSexCount = (data: any) => {
  let chartDom = document.getElementById('singer-sex')
  let myChart = echarts.init(chartDom)
  let options = {
    title: {
      text: '歌手性别统计',
      left: 'center',
    },
    legend: {
      bottom: '10%',
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['7%', '35%'],
        center: ['50%', '45%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: data,
      },
    ],
  }
  options && myChart.setOption(options)
}
const initAdminStatusCount = (data: any) => {
  let chartDom = document.getElementById('admin-status')
  let myChart = echarts.init(chartDom)
  let options = {
    title: {
      text: '管理员状态统计',
      left: 'center',
    },
    legend: {
      bottom: '10%',
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['7%', '35%'],
        center: ['50%', '45%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: data,
      },
    ],
  }
  options && myChart.setOption(options)
}
const initSongCount = (data: any) => {
  let chartDom = document.getElementById('song')
  let myChart = echarts.init(chartDom)
  let options = {
    title: {
      text: '歌曲统计',
      left: 'center',
    },
    // legend: {
    //   bottom: '10%'
    // },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: [50, 180],
        avoidLabelOverlap: false, //标签重叠
        itemStyle: {
          borderRadius: 10,
        },
        // 高亮状态的扇区和标签样式
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fongWeight: 'bold',
          },
        },
        data: data,
      },
    ],
  }
  options && myChart.setOption(options)
}
</script>

<style scoped lang="scss">
// flex布局的应用
.container {
  height: 100%;
  width: 100%;
  // border: 1px solid pink;
  display: flex;

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    // width: 25%;
    height: 100%;
    // border: 1px solid red;

    #user-sex,
    #singer-sex {
      width: 100%;
      flex: 1;
      // border: 1px solid blue;
    }
  }

  .main {
    flex: 2;
    // border: 1px solid green;
    display: flex;

    #song {
      flex: 1;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;

    #user-status,
    #admin-status {
      flex: 1;
      // border: 1px solid blue;
    }
  }
}
</style>
